<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" >
      <el-form-item label="编号" prop="number">
        <el-input  v-model="form.numberNum" disabled style="width: 280px;"/>
      </el-form-item>
      <el-form-item label="借阅部门" prop="borrowDept">
        <el-input style="width: 280px;" v-model="form.borrowDept" :disabled='isdisabled' placeholder="请输入借阅部门" />
      </el-form-item>
      <el-form-item label="借阅人联系电话" prop="borrowTel">
        <el-input style="width: 280px;" v-model="form.borrowTel" :disabled='isdisabled' placeholder="请输入借阅人联系电话" />
      </el-form-item>
      <el-form-item label="资料清单">
        <el-button
          type="primary"
          :disabled="isdisabled"
          icon="el-icon-plus"
          size="mini"
          @click="applayaddRow(applyList)"
        >添加资料</el-button>
      </el-form-item>
      <el-table
        ref="table"
        :data="applyList"
        style="width: 100%;margin-bottom:0.125rem"
        border
      >
        <el-table-column label="序号" align="center" width="55" prop="xh" type="index"></el-table-column>
        <el-table-column prop="itemName" label="物品名称" align="center" width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.itemName" :disabled="isdisabled"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="specificationModel" label="规格" align="center" width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.specificationModel" :disabled="isdisabled"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="number" label="数量" align="center" width="140">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.number"
              :disabled="isdisabled"
              type="number"
              @input="scope.row.number=scope.row.number.replace(/\D|^0/g,'')"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="demandDate" label="借阅日期" width="250" align="center">
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.demandDate"
              type="date"
              :disabled="isdisabled"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择日期时间"
            ></el-date-picker>
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注" width="200" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.remarks" :disabled="isdisabled"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="applaydeleteRow(scope.$index, applyList)"
              :disabled="isdisabled"
              size="small"
            >移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-form-item label="归还日期" prop="returnDate">
        <el-date-picker clearable
                        style="width: 280px;"
                        v-model="form.returnDate"
                        type="date"
                        format="yyyy-MM-dd"
                        :disabled='isdisabled'
                        value-format="yyyy-MM-dd"
                        placeholder="请选择归还日期">
        </el-date-picker>
      </el-form-item>
      <!--            <el-form-item label="归还方式" prop="returnWay">-->
      <!--              <template slot-scope="scope">-->
      <!--                <dict-tag :options="dict.type.act_status" :value="scope.row.actBusinessStatus.status"/>-->
      <!--              </template>-->
      <!--              <el-input style="width: 280px;" v-model="form.returnWay" :disabled='isdisabled' placeholder="请输入归还方式" />-->
      <!--            </el-form-item>-->
      <el-form-item label="归还方式" prop="returnWay">
        <el-select style="width: 280px;" v-model="form.returnWay" placeholder="请选择" :disabled='isdisabled'>
          <el-option
            v-for="dict in dict.type.return_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="借阅目的" prop="borrowReason">
        <el-input :disabled='isdisabled' v-model="form.borrowReason" type="textarea" placeholder="请输入内容" />
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input :disabled='isdisabled' v-model="form.remarks" type="textarea" placeholder="请输入内容" />
      </el-form-item>
    </el-form>
      <div v-show="parentTaskId==null" class="dialog-footer" style="text-align:center">
          <el-button :loading="buttonLoading" size="small" type="info" @click="submitCallback">关闭</el-button>
          <el-button :loading="buttonLoading" size="small" type="primary" @click="submitForm" v-if="confirmVisible">提交</el-button>
      </div>
      <!-- 工作流开始 -->
      <verify ref="verifyRef" :taskId="taskId"
              @submitCallback="submitCallback" :componentName="componentName"
              :taskVariables="taskVariables" :sendMessage="sendMessage"></verify>
  </div>
</template>

<script>
import { getAdminBorrow } from "@/api/oa/adminBorrow";
import verify from "@/components/Process/Verify";
import {parseTime} from "@/utils/ruoyi";
export default {
  name: "AdminBorrowForm",
  dicts: ['act_status','return_type'],
  components: {
      verify
  },
  props: {
      businessKey: String, // 业务唯一标识
      parentTaskId: String, // 父级任务id
      taskId: String, // 任务id
      confirmVisible:{
          type: Boolean,
          default: true
      }
  },
  data() {
    return {
      componentName:"资料借阅审批申请",
      isdisabled:true,
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 表单参数
      form: {},
        projectNameList:[],
      // 表单校验
      rules: {
        borrowDept: [
          { required: true, message: "借阅部门不能为空", trigger: "blur" }
        ],
        borrowTel: [
          { required: true, message: "借阅人联系电话不能为空", trigger: "blur" }
        ],
        dataInfo: [
          { required: true, message: "借阅资料信息不能为空", trigger: "blur" }
        ],
        borrowReason: [
          { required: true, message: "借阅目的不能为空", trigger: "blur" }
        ],
        returnDate: [
          { required: true, message: "归还日期不能为空", trigger: "blur" }
        ],
        returnWay: [
          { required: true, message: "归还方式不能为空", trigger: "blur" }
        ],
        remarks: [
          { required: true, message: "备注不能为空", trigger: "blur" }
        ],
      },
        taskVariables: undefined,
        //消息提醒
        sendMessage: {},
        processKey: 'oa_admin_borrow',
    };
  },
  watch: {
      businessKey: {
          immediate: true, // 很重要！！！
          handler (newVal) {
              if(newVal) {
                  this.getById()
              }
          }
      }
  },
  methods: {
    submitCallback(){
        this.$emit("closeForm")
    },
    async getById() {
      const {data} = await getAdminBorrow(this.businessKey)
      this.form = data;
      if (this.form.dataInfo) {
        this.applyList = JSON.parse(this.form.dataInfo);
        // this.applyList = response.data.dataInfo;
      }
      if (data.actBusinessStatus.createTime){
            this.form.numberNum=this.processKey + '@' + parseTime(data.actBusinessStatus.createTime, '{y}{m}{d}{h}{i}{s}')
        }
    },
    /** 提交按钮 */
    submitForm() {
        getAdminBorrow(this.businessKey).then(response => {
          this.taskVariables = {
              entity: response.data,
          };
          this.sendMessage = {
            title: "资料借阅审批提醒",
            messageContent: this.$store.state.user.nickName + "审批通过了资料借阅"
          };
        });
        this.$refs.verifyRef.visible = true
        this.$refs.verifyRef.reset()
    },
    //添加表格里的行(申请状态)
    applayaddRow(tableData1) {
      tableData1.push({
        specificationModel: "",
        number: "",
        unity: "",
        unitPrice: "",
        totalPrice: "",
        demandDate: "",
        remarks: "",
        xh: this.xh1,
        infoId: this.infoId
      });
    },
    //删除表格里的行(申请状态)
    applaydeleteRow(index, rows) {
      rows.splice(index, 1);
    },
  }
};
</script>
<style scoped>
    /* 设置滚动条宽度和高度 */
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
        width: 8px; /* 横向滚动条 */
        height: 8px; /* 纵向滚动条 必写 */
    }
    /* 设置滚动条样式 */
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
        background-color: #dde;
        border-radius: 3px;
    }
    #selectForm >>> .el-form-item__label {
        font-size: 12px;
    }
    ::v-deep .bjsm .el-form-item__content{
        width: calc(100% - 130px) !important;
    }
</style>
